<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"tallgy.gitee.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="只是一个知识的搬运工">
<meta property="og:type" content="website">
<meta property="og:title" content="tallgy&#39;s blog">
<meta property="og:url" content="http://tallgy.gitee.io/page/8/index.html">
<meta property="og:site_name" content="tallgy&#39;s blog">
<meta property="og:description" content="只是一个知识的搬运工">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="tallgy">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://tallgy.gitee.io/page/8/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":true,"isPost":false,"lang":"zh-CN","comments":"","permalink":"","path":"page/8/index.html","title":""}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>tallgy's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">tallgy's blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">tallgy</p>
  <div class="site-description" itemprop="description">只是一个知识的搬运工</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">107</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">74</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/06/%E6%B5%8F%E8%A7%88%E5%99%A8/%E8%AF%B7%E6%B1%82%E8%B7%A8%E5%9F%9F/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/06/%E6%B5%8F%E8%A7%88%E5%99%A8/%E8%AF%B7%E6%B1%82%E8%B7%A8%E5%9F%9F/" class="post-title-link" itemprop="url">请求跨域</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-06 13:16:54" itemprop="dateCreated datePublished" datetime="2021-11-06T13:16:54+08:00">2021-11-06</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h1><p><strong>什么是同源</strong></p>
<p>​        如果两个 URL 的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Protocol">protocol</a>、<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Glossary/Port">port (en-US)</a> (如果有指定的话)和 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Host">host</a> 都相同的话，则这两个 URL 是<em>同源</em>。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。</p>
<p>跨域就是因为浏览器的安全原因，只能执行同源的脚本。对于不是同源的请求将会产生跨域。</p>
<p>对于前后端分离的开发方式，如果不解决跨域，那么我们将无法获取到返回的数据。</p>
<h1 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h1><h2 id="CORS-跨域资源共享"><a href="#CORS-跨域资源共享" class="headerlink" title="CORS 跨域资源共享"></a>CORS 跨域资源共享</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS</span><br></pre></td></tr></table></figure>



<p>​        跨域资源共享分为了简单请求和非简单请求两种。</p>
<h3 id="简单请求"><a href="#简单请求" class="headerlink" title="简单请求"></a>简单请求</h3><p>当满足下面条件时，就属于简单请求</p>
<ul>
<li>请求方法是下面的方法</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">GET，HEAD，POST</span><br></pre></td></tr></table></figure>

<ul>
<li>请求头字段，除了是用户代理自动设置的字段(user-agent) 以及在 fetch 规范中为禁用首部名称的首部。还有人为设置的字段</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">user-agent 等用户代理的字段</span><br><span class="line">fetch 规范禁用的首部名称的首部</span><br><span class="line">允许人为设置的字段。</span><br><span class="line">accept</span><br><span class="line">accept-language</span><br><span class="line">content-language</span><br><span class="line">content-type (text/plain， mutipart/form-data， application/x-www-form-urlencoded)</span><br></pre></td></tr></table></figure>

<ul>
<li>对于任意的 XMLHttpRequestUpload 对象没有注册任何事件监听器。<ul>
<li><strong>XMLHttpRequest.upload 属性返回一个</strong> <code>XMLHttpRequestUpload</code>对象，用来表示上传的进度。</li>
</ul>
</li>
<li>请求没有使用 ReadableStream 对象<ul>
<li>流操作API</li>
</ul>
</li>
</ul>
<h4 id="服务器端如何使用响应头进行响应"><a href="#服务器端如何使用响应头进行响应" class="headerlink" title="服务器端如何使用响应头进行响应"></a>服务器端如何使用响应头进行响应</h4><p>​        首先，请求可以使用请求首部字段 origin 表明请求的来源。这个和refer有点相似，但是origin只是指示了请求来源于哪个站点，并没有包含任何路径信息。</p>
<p>​        然后服务器端通过使用 Access-Control-Allow-Origin 响应头进行响应。</p>
<p>​        Access-Control-Allow-Origin: *， 表明了该资源可以被任何外域访问。如果想只允许 <a target="_blank" rel="noopener" href="http://www.example/">http://www.example</a> 的访问，设置响应头 Access-Control-Allow-Origin: <a target="_blank" rel="noopener" href="http://www.example/">http://www.example</a> 。设置了响应头之后，其他外域不能访问该资源。通过origin来定义是否为外域资源。</p>
<p>​    Access-Control-Allow-Origin，访问控制允许源</p>
<h3 id="非简单请求"><a href="#非简单请求" class="headerlink" title="非简单请求"></a>非简单请求</h3><p>非简单请求相对于简单请求来说，多了一个预检请求 options。</p>
<p>通过预检请求来获取服务器是否允许实际的请求。</p>
<h4 id="预检请求"><a href="#预检请求" class="headerlink" title="预检请求"></a>预检请求</h4><ul>
<li>使用的请求方式是 OPTIONS</li>
<li>会携带了两个请求首部字段<ul>
<li>Access-Control-Request-Method: POST，访问控制请求方式，代表了我实际请求将使用POST方法。</li>
<li>Access-Control-Request-Headers: Content-Type，访问控制请求头，代表了我实际请求将携带这个自定义首部字段。</li>
</ul>
</li>
<li>服务器将根据这两个字段来决定该实际请求是否被允许。</li>
</ul>
<p>服务器的响应头设置</p>
<ul>
<li>Access-Control-Allow-Origin：<a target="_blank" rel="noopener" href="http://foo.example/">http://foo.example</a><ul>
<li>表示了访问控制允许源，允许哪个源进行访问 <a target="_blank" rel="noopener" href="http://foo.example/">http://foo.example</a></li>
</ul>
</li>
<li>Access-Control-Allow-Method：POST，GET，OPTIONS <ul>
<li>访问控制允许方法，比如设置了POST，GET，OPTIONS，表示了允许这三个方法进行访问</li>
</ul>
</li>
<li>Access-Control-Allow-Headers：X-PINGOTHER, Content-Type <ul>
<li>访问控制允许头，就是说，允许后面的请求头携带。这里就是说，允许自定义头X-PINGOTHER的携带。对于Content-type的携带，因为Content-Type是默认只允许三个内容进行允许。</li>
</ul>
</li>
<li>Access-Control-Max-Age：86400<ul>
<li>表示该响应的有效时间是86400s，表示在时间内不需要在进行一次预检请求。</li>
</ul>
</li>
</ul>
<p>去掉对于预检请求的重定向。大部分的浏览器可能对于预检请求的重定向会报告错误。</p>
<p>解决方式，</p>
<ul>
<li>去掉对预检请求的重定向</li>
<li>将实际的请求变换为一个简单请求</li>
<li>或者发出一个简单请求（使用  <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Response/url">Response.url</a> 或 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a>）来判断预检请求的地址，然后再发送真正的请求。使用的是真正的地址。 response.url，这个是响应的url，值为重定向之后的最终URL。</li>
</ul>
<h3 id="跨域请求携带Cookie"><a href="#跨域请求携带Cookie" class="headerlink" title="跨域请求携带Cookie"></a>跨域请求携带Cookie</h3><p>​        因为跨域请求不会发送身份凭证信息，所以需要使用一个特殊的请求头标志位</p>
<p>​         <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials"><code>XMLHttpRequest.withCredentials</code></a> 设置这个值为true，那么就会将会发送cookie等信息。</p>
<p>​        当然如果设置了这个之后，服务器端需要设置 Access-Control-Allow-Credentials: true, 否则浏览器将不会将相应内容返回给发送者。</p>
<p>​        同时，对于附带了身份凭证的请求，服务器不能将访问控制允许源设置为*，而需要设置为一个具体的域名。</p>
<p>​        并且记住，这个算是第三方的cookie，因为域名不一样。</p>
<h2 id="使用代理"><a href="#使用代理" class="headerlink" title="使用代理"></a>使用代理</h2><p>​        我们可以知道跨域的原因是浏览器的安全策略问题，所以我们可以使用代理的方式来解决跨域的问题。</p>
<p>​        这里的代理有Node的中间件代理和nginx代理</p>
<h2 id="使用-JSONP"><a href="#使用-JSONP" class="headerlink" title="使用 JSONP"></a>使用 JSONP</h2><p>​        这个比较简单的理解，因为JSONP简单来说就是利用了一些标签没有同源限制的漏洞进行的操作。比如script等。</p>
<h2 id="使用iframe"><a href="#使用iframe" class="headerlink" title="使用iframe"></a>使用iframe</h2>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/06/%E9%9A%8F%E7%AC%94/%E7%BD%91%E7%BB%9C/%E7%8A%B6%E6%80%81%E7%A0%81/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/06/%E9%9A%8F%E7%AC%94/%E7%BD%91%E7%BB%9C/%E7%8A%B6%E6%80%81%E7%A0%81/" class="post-title-link" itemprop="url">状态码</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-06 10:51:49" itemprop="dateCreated datePublished" datetime="2021-11-06T10:51:49+08:00">2021-11-06</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="状态码"><a href="#状态码" class="headerlink" title="状态码"></a>状态码</h1><h2 id="1xx"><a href="#1xx" class="headerlink" title="1xx"></a>1xx</h2><ul>
<li><strong>100</strong><ul>
<li>告诉客户端应该继续发送请求。</li>
</ul>
</li>
</ul>
<h2 id="2xx"><a href="#2xx" class="headerlink" title="2xx"></a>2xx</h2><ul>
<li><strong>200</strong><ul>
<li>表示服务器已经成功接收请求，并返回请求结果</li>
</ul>
</li>
<li><strong>202</strong><ul>
<li>表示服务器接受了请求，但是还没有处理</li>
</ul>
</li>
<li><strong>204</strong><ul>
<li>表示服务器处理了请求，但是没有返回任何实体内容</li>
</ul>
</li>
<li><strong>206</strong><ul>
<li>是对资源的部分请求，断点续传，下载时的</li>
</ul>
</li>
</ul>
<h2 id="3xx"><a href="#3xx" class="headerlink" title="3xx"></a>3xx</h2><ul>
<li><strong>301</strong><ul>
<li>永久重定向，客户端会保存新的链接。</li>
</ul>
</li>
<li><strong>302</strong><ul>
<li>临时重定向，一般如果不是资源的临时移动，都建议使用301，有很多好处</li>
</ul>
</li>
<li><strong>303</strong><ul>
<li>和302相同，但是明确表示客户端应当采用GET方法获取资源</li>
</ul>
</li>
<li><strong>304</strong><ul>
<li>命中协商缓存</li>
</ul>
</li>
</ul>
<h2 id="4xx"><a href="#4xx" class="headerlink" title="4xx"></a>4xx</h2><ul>
<li><strong>400</strong><ul>
<li>客户端发送的请求无法理解</li>
</ul>
</li>
<li><strong>401</strong><ul>
<li>请求需要通过HTTP认证</li>
</ul>
</li>
<li><strong>403</strong><ul>
<li>不允许访问资源，权限，未授权等</li>
</ul>
</li>
<li><strong>404</strong><ul>
<li>服务器没有的请求资源，路径错误等</li>
</ul>
</li>
</ul>
<h2 id="5xx"><a href="#5xx" class="headerlink" title="5xx"></a>5xx</h2><ul>
<li><strong>500</strong><ul>
<li>服务器错误</li>
</ul>
</li>
<li><strong>503</strong><ul>
<li>服务器负载</li>
</ul>
</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/06/%E9%9A%8F%E7%AC%94/%E7%BD%91%E7%BB%9C/TCP/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/06/%E9%9A%8F%E7%AC%94/%E7%BD%91%E7%BB%9C/TCP/" class="post-title-link" itemprop="url">TCP</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-06 09:45:52" itemprop="dateCreated datePublished" datetime="2021-11-06T09:45:52+08:00">2021-11-06</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="TCP"><a href="#TCP" class="headerlink" title="TCP"></a>TCP</h1><ul>
<li>首先TCP属于传输层</li>
<li>面向连接的传输层协议</li>
<li>一对一的连接</li>
<li>提供可靠交付服务</li>
<li>全双工通信</li>
<li>面向字节流：指的是流入到进程或从进程流出的字节序列</li>
</ul>
<p>​        TCP并不关心应用一次把多长的报文发送到TCP缓存中，而是根据对方给出的窗口和当前网络拥塞的程度来决定一个报文应该包含多少个字节。</p>
<h2 id="TCP和UDP的区别"><a href="#TCP和UDP的区别" class="headerlink" title="TCP和UDP的区别"></a>TCP和UDP的区别</h2><table>
<thead>
<tr>
<th>TCP</th>
<th>UDP</th>
</tr>
</thead>
<tbody><tr>
<td>面向连接</td>
<td>无连接，即发送前不需要先建立连接</td>
</tr>
<tr>
<td>提供可靠交互，无差错，不丢失，不重复，按序到达</td>
<td>尽最大努力交付，不保证可靠交付</td>
</tr>
<tr>
<td>面向字节流</td>
<td>面向报文</td>
</tr>
<tr>
<td>一对一的连接</td>
<td>支持一对一，一对多的通信</td>
</tr>
<tr>
<td>拥塞控制</td>
<td>没有拥塞控制，所以不会使发送率降低，因此会出现丢包</td>
</tr>
<tr>
<td>首部较大20字节</td>
<td>只有8字节</td>
</tr>
</tbody></table>
<h2 id="可靠传输的工作原理"><a href="#可靠传输的工作原理" class="headerlink" title="可靠传输的工作原理"></a>可靠传输的工作原理</h2><ul>
<li>停止等待协议<ul>
<li><img src="/.io//image-20211106102234899.png" alt="image-20211106102234899" style="zoom: 67%;"></li>
</ul>
</li>
<li>连续arq协议<ul>
<li><img src="/.io//image-20211106102310315.png" alt="image-20211106102310315" style="zoom:67%;"></li>
</ul>
</li>
</ul>
<h2 id="TCP可靠传输的实现"><a href="#TCP可靠传输的实现" class="headerlink" title="TCP可靠传输的实现"></a>TCP可靠传输的实现</h2><ul>
<li>滑动窗口<ul>
<li><img src="/.io//image-20211106102333564.png" alt="image-20211106102333564" style="zoom:67%;"></li>
</ul>
</li>
</ul>
<h2 id="拥塞控制方法"><a href="#拥塞控制方法" class="headerlink" title="拥塞控制方法"></a>拥塞控制方法</h2><p>​        慢开始和拥塞避免</p>
<img src="/.io//image-20211106102433477.png" alt="image-20211106102433477" style="zoom:67%;">

<p>​        计算方式</p>
<img src="/.io//image-20211106102459740.png" alt="image-20211106102459740" style="zoom:67%;">



<h2 id="TCP三次握手"><a href="#TCP三次握手" class="headerlink" title="TCP三次握手"></a>TCP三次握手</h2><img src="/.io//image-20211106102538627.png" alt="image-20211106102538627" style="zoom:67%;">

<p>步骤：</p>
<ul>
<li>客户端主动打开，进行连接，SYN=1，seq=x，状态为SYN-SENT</li>
<li>服务器处于LISTEN状态，等待客户端开始连接，接收到客户端的连接之后，返回 SYN=1，ACK=1，seq=y，ack=x+1，状态修改为SYN-RCVD</li>
<li>客户端收到连接之后，发送 ACK=1，seq=x+1，ack=y+1，此时就代表了客户端已经成功收到，处于了ESTAB-LISHED状态。</li>
<li>服务器收到之后，也处于了ESTAB-LISHED状态</li>
<li>开始进行数据传送。</li>
</ul>
<p><strong>一句话简述</strong>：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">客户端发起连接请求，</span><br><span class="line">服务器收到连接请求，发送了确认报文。</span><br><span class="line">客户端收到确认报文，发送自己的确认报文，并准备传输数据。</span><br><span class="line">服务器收到了客户端的确认报文，准备接收数据。</span><br></pre></td></tr></table></figure>



<h2 id="TCP四次挥手"><a href="#TCP四次挥手" class="headerlink" title="TCP四次挥手"></a>TCP四次挥手</h2><img src="/.io//image-20211106103554196.png" alt="image-20211106103554196" style="zoom:67%;">

<p><strong>步骤：</strong></p>
<p>客户端A，服务器B</p>
<ul>
<li>A主动关闭，发送 FIN=1，seq=u，状态置为 FIN-WAIT-1</li>
<li>B收到关闭信息，先返回确认报文，ACK=1，seq=v，ack=u+1，状态：CLOSE-WAIT</li>
<li>此时因为B可能还有数据传输或者数据处理，所以不会马上关闭</li>
<li>A收到确认信息，状态：FIN-WAIT-2</li>
<li>B数据传输结束，准备关闭，返回关闭确认，FIN=1，ACK=1，seq=w，ack=u+1，状态：LAST-ACK</li>
<li>A收到了确认关闭的信息，发送确认收到报文，ACK=1，seq=u+1，ack=w+1，同时状态：TIME-WAIT。</li>
<li>这里为什么A没有马上关闭是因为，如果B没有收到最后的确认报文，就不会关闭会重复发送，所以这里A等待了2MSL，（MSL叫做最长报文段寿命(Maximum Segment Lifetime)），所以在2MSL之后，关闭了连接，状态：closed</li>
<li>B收到确认，关闭连接，状态：closed</li>
</ul>
<p><strong>一句话简述</strong>：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">客户端发送关闭，</span><br><span class="line">服务器确认收到并返回确认，但是此时服务器可能有数据进行传输，所以没有马上关闭</span><br><span class="line">服务器传输结束，返回关闭确认</span><br><span class="line">客户端收到关闭确认，返回确认</span><br><span class="line">服务器收到确认，关闭</span><br><span class="line">客户端等待了2MSL，来回最长报文段寿命后，关闭。</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/05/%E9%9A%8F%E7%AC%94/%E7%BD%91%E7%BB%9C/HTTP%E5%92%8CHTTPS/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/05/%E9%9A%8F%E7%AC%94/%E7%BD%91%E7%BB%9C/HTTP%E5%92%8CHTTPS/" class="post-title-link" itemprop="url">HTTP和HTTPS</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-05 21:52:44" itemprop="dateCreated datePublished" datetime="2021-11-05T21:52:44+08:00">2021-11-05</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="HTTP和HTTPS的区别"><a href="#HTTP和HTTPS的区别" class="headerlink" title="HTTP和HTTPS的区别"></a>HTTP和HTTPS的区别</h1><p>参考链接</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://www.nowcoder.com/tutorial/96/4700c6f1f3334c9191a38406002efa65</span><br></pre></td></tr></table></figure>



<h2 id="体系结构"><a href="#体系结构" class="headerlink" title="体系结构"></a>体系结构</h2><p>首先我们要知道 OSI网络参考模型 和 TCP/IP模型 以及最后的五层协议的体系</p>
<img src="http和https/image-20210831164301870.png" alt="image-20210831164301870" style="zoom:67%;">

<p><strong>对比</strong></p>
<ul>
<li>TCP/IP 将OSI 应用层，表示层，会话层 合并为了 应用层，但是同时也将 数据链路层 和物理层合并为了网络接口层。</li>
<li>而五层协议在TCP/IP和OSI的综合下，合并了应用层，但是也保留了数据链路层和物理层</li>
</ul>
<p>在这里，应用层就是HTTP的部分了。</p>
<h2 id="HTTP协议"><a href="#HTTP协议" class="headerlink" title="HTTP协议"></a>HTTP协议</h2><p>​        HTTP：超文本传输协议。是一个客户端和服务器端应答的标准(TCP)，</p>
<h3 id="HTTP报文格式"><a href="#HTTP报文格式" class="headerlink" title="HTTP报文格式"></a>HTTP报文格式</h3><p>​        请求行，请求头，空行，请求体</p>
<h2 id="HTTPS"><a href="#HTTPS" class="headerlink" title="HTTPS"></a>HTTPS</h2><p>​        HTTPS，在HTTP的基础上，添加了安全，因为HTTP都是进行的明文传输。</p>
<p>​        HTTPS的SSL加密是在传输层实现的。</p>
<p>​        HTTPS的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。</p>
<h3 id="SSL-TLS"><a href="#SSL-TLS" class="headerlink" title="SSL/TLS"></a>SSL/TLS</h3><p>SSL，安全套接层，Secure Sockets Layer</p>
<p>TLS，安全传输层，Transport Layer Security</p>
<h3 id="摘要算法"><a href="#摘要算法" class="headerlink" title="摘要算法"></a>摘要算法</h3><ul>
<li>它可以把任意长度的数据压缩成固定长度，并且独一无二的摘要字符串。</li>
<li>通过把明文信息和摘要一起加密传输，接收后解密再对明文信息进行摘要，判断是否被修改。</li>
</ul>
<h3 id="对称加密和非对称加密"><a href="#对称加密和非对称加密" class="headerlink" title="对称加密和非对称加密"></a>对称加密和非对称加密</h3><ul>
<li>对称加密，加密和解密使用相同的密钥进行实现</li>
<li>非对称加密，有两个密钥，一个是<strong>私钥</strong>，一个是<strong>公钥</strong>，<strong>私钥是必须严格保密的，用于解密的。公钥是公开的，进行加密的。</strong> </li>
</ul>
<h3 id="混合加密"><a href="#混合加密" class="headerlink" title="混合加密"></a>混合加密</h3><ul>
<li><p>因为非对称加密的传输速度较慢，所以使用混合加密的方式。</p>
</li>
<li><p>简而言之，通过非对称加密进行传输对称加密的密钥，然后通过对称加密进行数据传输。</p>
</li>
</ul>
<h3 id="数字证书"><a href="#数字证书" class="headerlink" title="数字证书"></a>数字证书</h3><ul>
<li>对于一个服务是否可信，我们通过使用了数字证书来进行验证。</li>
<li>里面包括了 CA信息，公钥用户的信息，公钥，权威机构的签名，有效期</li>
<li>数字证书的作用： 1.向浏览器证明身份。 2.里面含有公钥。</li>
</ul>
<h3 id="HTTPS的传输步骤"><a href="#HTTPS的传输步骤" class="headerlink" title="HTTPS的传输步骤"></a>HTTPS的传输步骤</h3><ul>
<li><p>客户端使用HTTPS进行访问时，则要求web服务器建立SSL连接。</p>
</li>
<li><p>web服务端收到请求后，会将网站的数字证书返回给客户端。</p>
</li>
<li><p>客户端验证过后，开始和web服务器协商SSL连接的安全等级，就是加密等级。</p>
</li>
<li><p>客户端通过双方协商后的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。</p>
</li>
<li><p>服务端进行解密，也获取了密钥</p>
</li>
<li><p>使用密钥进行传输</p>
</li>
</ul>
<h3 id="HTTPS的优点"><a href="#HTTPS的优点" class="headerlink" title="HTTPS的优点"></a>HTTPS的优点</h3><ul>
<li>安全，防止数据在过程中不被窃取，改变，确保了数据的完整性。</li>
</ul>
<h3 id="HTTPS的缺点"><a href="#HTTPS的缺点" class="headerlink" title="HTTPS的缺点"></a>HTTPS的缺点</h3><ul>
<li>费时</li>
<li>缓存没有HTTP高效</li>
</ul>
<h2 id="HTTP和HTTPS的区别-1"><a href="#HTTP和HTTPS的区别-1" class="headerlink" title="HTTP和HTTPS的区别"></a>HTTP和HTTPS的区别</h2><ul>
<li>HTTPS协议需要ca证书，费用较高。</li>
<li>HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的ssl加密传输协议。</li>
<li>使用不同的链接方式，端口也不同，一般而言，HTTP协议的端口为80，HTTPS的端口为443</li>
<li>HTTP的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP协议安全。</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/04/%E6%B5%8F%E8%A7%88%E5%99%A8/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/04/%E6%B5%8F%E8%A7%88%E5%99%A8/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" class="post-title-link" itemprop="url">前端性能优化</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-04 20:53:03" itemprop="dateCreated datePublished" datetime="2021-11-04T20:53:03+08:00">2021-11-04</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="前端性能优化"><a href="#前端性能优化" class="headerlink" title="前端性能优化"></a>前端性能优化</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://zhuanlan.zhihu.com/p/115047733</span><br></pre></td></tr></table></figure>



<h2 id="页面加载以及渲染过程优化"><a href="#页面加载以及渲染过程优化" class="headerlink" title="页面加载以及渲染过程优化"></a>页面加载以及渲染过程优化</h2><ul>
<li><p>CRP优化</p>
<ul>
<li>关键渲染路径优化 critical rendering path</li>
</ul>
</li>
<li><p>优化DOM</p>
</li>
<li><p>优化CSSOM</p>
</li>
<li><p>优化 JavaScript</p>
</li>
<li><p>回流重绘的优化</p>
</li>
<li><p>图片懒加载</p>
<ul>
<li>指定一张图片，src为空也会进行请求，需要设置宽高，不然会出现宽高不匹配的情况</li>
</ul>
</li>
<li><p>事件委托</p>
<ul>
<li>利用 JS 事件冒泡机制把元素绑定给父元素</li>
</ul>
</li>
</ul>
<h2 id="渲染完成之后的页面交互优化"><a href="#渲染完成之后的页面交互优化" class="headerlink" title="渲染完成之后的页面交互优化"></a>渲染完成之后的页面交互优化</h2><ul>
<li>防抖节流</li>
</ul>
<h2 id="Vue相关性能的优化"><a href="#Vue相关性能的优化" class="headerlink" title="Vue相关性能的优化"></a>Vue相关性能的优化</h2><ul>
<li>组件懒加载</li>
<li>服务端渲染和预渲染</li>
<li>数据扁平化，合理持久化数据</li>
<li>合理利用 freeze</li>
</ul>
<h2 id="前端性能优化-1"><a href="#前端性能优化-1" class="headerlink" title="前端性能优化"></a>前端性能优化</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">https://zhuanlan.zhihu.com/p/113864878</span><br><span class="line">https://segmentfault.com/a/1190000022205291</span><br></pre></td></tr></table></figure>



<h2 id="请求、网络相关的优化"><a href="#请求、网络相关的优化" class="headerlink" title="请求、网络相关的优化"></a>请求、网络相关的优化</h2><h3 id="简单来说，就是使用强缓存和协商缓存。在强缓存时间使用了协商缓存可以对文件进行hash操作。"><a href="#简单来说，就是使用强缓存和协商缓存。在强缓存时间使用了协商缓存可以对文件进行hash操作。" class="headerlink" title="简单来说，就是使用强缓存和协商缓存。在强缓存时间使用了协商缓存可以对文件进行hash操作。"></a>简单来说，就是使用强缓存和协商缓存。在强缓存时间使用了协商缓存可以对文件进行hash操作。</h3><h3 id="进行图片懒加载操作"><a href="#进行图片懒加载操作" class="headerlink" title="进行图片懒加载操作"></a>进行图片懒加载操作</h3><h3 id="使用防抖-节流"><a href="#使用防抖-节流" class="headerlink" title="使用防抖/节流"></a>使用防抖/节流</h3><h3 id="组件懒加载"><a href="#组件懒加载" class="headerlink" title="组件懒加载"></a>组件懒加载</h3><h3 id="文件压缩"><a href="#文件压缩" class="headerlink" title="文件压缩"></a>文件压缩</h3><h2 id="页面显示优化"><a href="#页面显示优化" class="headerlink" title="页面显示优化"></a>页面显示优化</h2><h3 id="对于页面使用重绘回流"><a href="#对于页面使用重绘回流" class="headerlink" title="对于页面使用重绘回流"></a>对于页面使用重绘回流</h3><h3 id="使用事件委托"><a href="#使用事件委托" class="headerlink" title="使用事件委托"></a>使用事件委托</h3><h2 id="代码编写优化"><a href="#代码编写优化" class="headerlink" title="代码编写优化"></a>代码编写优化</h2><h3 id="html，js，css的位置对于DOM树生成的优化。"><a href="#html，js，css的位置对于DOM树生成的优化。" class="headerlink" title="html，js，css的位置对于DOM树生成的优化。"></a>html，js，css的位置对于DOM树生成的优化。</h3><p>​        对这些位置进行优化。因为js的请求会影响DOM树的编写，js里对css的修改会先生成cssom树，所以在合适的位置编写位置可以进行考虑。</p>
<h3 id="使用-Object-freeze提升性能"><a href="#使用-Object-freeze提升性能" class="headerlink" title="使用 Object.freeze提升性能"></a>使用 Object.freeze提升性能</h3><p>​        Vue的响应式原理，所以可以考虑对一些方法使用冻结来提升性能。</p>
<h3 id="扁平化数据"><a href="#扁平化数据" class="headerlink" title="扁平化数据"></a>扁平化数据</h3><h3 id="Vue的生产环境和运行环境"><a href="#Vue的生产环境和运行环境" class="headerlink" title="Vue的生产环境和运行环境"></a>Vue的生产环境和运行环境</h3>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/10/31/Vue/Vue-methods%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/10/31/Vue/Vue-methods%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/" class="post-title-link" itemprop="url">Vue-methods使用箭头函数</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-10-31 16:51:55" itemprop="dateCreated datePublished" datetime="2021-10-31T16:51:55+08:00">2021-10-31</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="Vue"><a href="#Vue" class="headerlink" title="Vue"></a>Vue</h1><p>本篇随笔写的是在Vue的 <strong>methods</strong> 方法里面使用箭头函数。</p>
<p>在说明之前，我们先对这个进行一下分析：</p>
<p>首先 一个 <strong>Vue</strong> 的实例实则也是通过里面的对象进行的操作。</p>
<p>其次，<strong>箭头函数的作用</strong>，主要是 this 指向的不同，箭头函数的 this 指向是根据当前的上下文进行决定的。</p>
<p>所以首先可以认为，在Vue里面使用箭头函数，如果要使用 data里面 数据应该是不行，因为data里面的数据是通过 this 来获取，所以我们可以认为，Vue 内部对每个方法进行了一个this指向的变化，而箭头函数是无法修改的。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">var app4 = new Vue(&#123;</span><br><span class="line">  el: &#x27;#app-4&#x27;,</span><br><span class="line">  data: &#123;</span><br><span class="line">    todos: [</span><br><span class="line">      &#123; text: &#x27;学习 JavaScript&#x27;, flag: true &#125;,</span><br><span class="line">      &#123; text: &#x27;学习 Vue&#x27;, flag: false &#125;,</span><br><span class="line">      &#123; text: &#x27;整个牛项目&#x27;, flag: true &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    test() &#123;</span><br><span class="line">      console.log(this.todos);</span><br><span class="line">    &#125;,</span><br><span class="line">    test1: () =&gt; &#123;</span><br><span class="line">      console.log(this.todos);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<p><strong>示例2：</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">var a = 3;</span><br><span class="line"></span><br><span class="line">let obj = &#123;</span><br><span class="line">  a: 1,</span><br><span class="line">  m: &#123;</span><br><span class="line">    t: () =&gt; &#123;</span><br><span class="line">      console.log(this);</span><br><span class="line">      console.log(this.a);</span><br><span class="line">    &#125;,</span><br><span class="line">    t1() &#123;</span><br><span class="line">      console.log(this);</span><br><span class="line">      console.log(this.a);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>t 使用的箭头函数，this 的指向为 window</p>
<p>t1 使用的普通函数，this 的指向，指向了调用他的方法。</p>
<p><strong>结论：</strong></p>
<ul>
<li>使用箭头函数的方法，确实不能获取到 data 的值</li>
<li>使用箭头函数后，this 的指向指向了 window 对象。</li>
<li>对于对象的对象的箭头函数，this的指向，还是指向的最外边的对象所处的上下文位置。</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/10/30/HTML/HTML-%E6%A0%87%E7%AD%BE%E7%9A%84title/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/10/30/HTML/HTML-%E6%A0%87%E7%AD%BE%E7%9A%84title/" class="post-title-link" itemprop="url">HTML-标签的title</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-10-30 22:35:32" itemprop="dateCreated datePublished" datetime="2021-10-30T22:35:32+08:00">2021-10-30</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/HTML/" itemprop="url" rel="index"><span itemprop="name">HTML</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/HTML/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="HTML-标签的title"><a href="#HTML-标签的title" class="headerlink" title="HTML-标签的title"></a>HTML-标签的title</h1><p>在学习的时候发现</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;span title=&quot;停滞的span&quot;&gt;显示的span&lt;/span&gt;</span><br></pre></td></tr></table></figure>

<img src="/.io//image-20211030223916508.png" alt="image-20211030223916508" style="zoom: 67%;">

<p>在页面上，鼠标进行放置可以显示 title，这个是一个html的title的特点。我们可以尝试对很多标签设置title，可以看看是否有效果。</p>
<h2 id="title"><a href="#title" class="headerlink" title="title"></a>title</h2><p>对一个标签添加 <strong>title</strong> 就可以实现。</p>
<h2 id="出现方式"><a href="#出现方式" class="headerlink" title="出现方式"></a>出现方式</h2><p>在一个标签的范围内，进行移动，超过了一定的时间就会显示。</p>
<h2 id="对于嵌套"><a href="#对于嵌套" class="headerlink" title="对于嵌套"></a>对于嵌套</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div style=&quot;height: 200px; border: 1px red solid;&quot; title=&quot;div&quot;&gt;</span><br><span class="line">  &lt;span title=&quot;停滞的span&quot;&gt;显示的span&lt;/span&gt;</span><br><span class="line">&lt;/div&gt; </span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">在外面的会显示的是div，在span内部的会显示span，这个就像极了，在冒泡阶段进行stop。</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/10/29/Vue/Vue2-%E6%95%99%E7%A8%8B/Vue2-%E6%95%99%E7%A8%8B-%E5%86%85%E5%9C%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/10/29/Vue/Vue2-%E6%95%99%E7%A8%8B/Vue2-%E6%95%99%E7%A8%8B-%E5%86%85%E5%9C%A8/" class="post-title-link" itemprop="url">Vue-使用-内在</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-10-29 23:16:15" itemprop="dateCreated datePublished" datetime="2021-10-29T23:16:15+08:00">2021-10-29</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/Vue2/" itemprop="url" rel="index"><span itemprop="name">Vue2</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="内在"><a href="#内在" class="headerlink" title="内在"></a>内在</h1><h2 id="深入响应式原理"><a href="#深入响应式原理" class="headerlink" title="深入响应式原理"></a>深入响应式原理</h2><p>​        在前面我们可以知道，当我们修改了data里面的数据时，视图也会进行更新。这样使得状态的管理非常的直接。</p>
<h3 id="如何追踪变化"><a href="#如何追踪变化" class="headerlink" title="如何追踪变化"></a>如何追踪变化</h3><p>​        Vue会将data里的数据使用 Object.defineProperty ，将这些 property 全部转为 getter/setter。因为 Object.defineProperty 是一个无法shim的特性。所以这也是Vue不支持IE8以及更低的版本的原因。</p>
<p>​        getter/setter 在 property 被访问和修改的时候通知变更。</p>
<p>​        每一个组件的实例都对应一个 watcher 实例，他会在组件渲染的过程中把 接触过的数据 property 记录为依赖。然后当 setter 触发时，通知 watcher，从而重新渲染。</p>
<img src="/.io//image-20211214103613477.png" alt="image-20211214103613477" style="zoom:67%;">

<p>​    data会被变更为 getter和setter，然后在视图使用到数据时，便会调用getter，然后添加入了一个dep依赖(这个是使用一个数组进行维护)。当数据发生改变时，会通过notify通知给watcher，然后watcher将会把dep数组的数据重新渲染。</p>
<h3 id="检测变化的注意事项"><a href="#检测变化的注意事项" class="headerlink" title="检测变化的注意事项"></a>检测变化的注意事项</h3><p>​        由于JavaScript的限制，Vue不能检测数组和对象的变化。</p>
<h4 id="对于对象"><a href="#对于对象" class="headerlink" title="对于对象"></a>对于对象</h4><p>​        对于对象来说，无法检测 property 的添加或移除。所以property必须在data对象上存在才能让vue将它转换为响应式的。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">var vm = new Vue(&#123;</span><br><span class="line">  data:&#123;</span><br><span class="line">    a:1</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">// `vm.a` 是响应式的</span><br><span class="line"></span><br><span class="line">vm.b = 2</span><br><span class="line">// `vm.b` 是非响应式的</span><br></pre></td></tr></table></figure>

<p>​        对于已经创建的实例，Vue不允许动态添加根级别的响应式 property。但是可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Vue.set(vm.someObject, &#x27;b&#x27;, 2)</span><br></pre></td></tr></table></figure>

<p>​    当然可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">this.$set(this.someObject, &#x27;b&#x27;, 2)</span><br><span class="line"></span><br><span class="line">this.$set(this.a, &#x27;b&#x27;, 123)</span><br></pre></td></tr></table></figure>

<p>​        有时你可能需要为已有的对象赋值多个新的property，比如使用 Object.assign() 或者 _.extend()。但是，这样添加并不会触发事件。此时需要将新的对象返回覆盖才能触发。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// Object.assign(this.someObject, &#123;a:1, b:2&#125;)</span><br><span class="line">this.someObject = Object.assign(&#123;&#125;, this.someObject, &#123;a:1, b:2&#125;)</span><br></pre></td></tr></table></figure>

<p>​    通过这个方法，我们可以知道几个知识点：</p>
<ul>
<li><p>Object.assign 是将第二个参数及其以后的赋值给第一个，对于重复的，会被覆盖，后面的会覆盖前面的。</p>
</li>
<li><p>第二点，这里为什么会被更新呢，其实并不是将someObject的内部的对象进行了 getter和setter 操作，而是因为someObject被修改了地址，所以我们也可以知道，这个 Object.defineProperty 是将这个值所指向的位置的监听。</p>
<ul>
<li><p>因为对象是堆的存放，而 Object.defineProperty 监听的是栈的值，所以对于对象内部的修改不会被监听到。而将新的对象赋值给了这个对象，此时对象的普通赋值是一个浅拷贝，只拷贝栈值，所以栈被修改了，导致了内部的数据全部都会进行一个监听。</p>
</li>
<li><p>而如果使用 this.$set(this.someObject, ‘o’, value)的话，仅仅只是将这个o的指向进行了监听，而不会监听其他的错误操作。比如：</p>
<ul>
<li><pre><code>this.a.c = 123
// 此时这个d加入了监听，但是对于c来说，并不会加入监听。因为c是一个错误添加方式。虽然不会进行监听，但是 &#123;&#123; a &#125;&#125;这样的输出还是会将c进行显示的，因为输出的是a，a.c虽然没有加入监听，但是仍然是属于a的。
this.$set(this.a, &#39;d&#39;, 1)

但是使用 Object.assign
这样，对于c来说也会进行监听，因为此时是将原来的this.a进行了栈的修改，对象已经不是一个对象了，此时Vue就会进行一个递归的操作，将新的对象全部进行一个监听。
this.a = Object.assign(&#123;&#125;, this.a, &#123;a:1, b:2&#125;)
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">#### 对于数组</span><br><span class="line"></span><br><span class="line">​		Vue对于数组的监听是将数组的方法进行了一个覆盖，在使用原来的方法的同时，也在里面加入了监听的方法，所以对于直接修改数组下标的将不会进行修改。</span><br><span class="line"></span><br><span class="line">​		Vue不能检测以下数组的变动：</span><br><span class="line"></span><br><span class="line">* 通过索引直接进行修改 arr[index] = newValue</span><br><span class="line">* 修改数组的长度 arr.length = newLength</span><br><span class="line"></span><br><span class="line">对于使用 下标进行修改的</span><br><span class="line"></span><br></pre></td></tr></table></figure>
这里可以使用，可以考虑JavaScript数组也是对象的想法
this.$set(this.arr, index, newValue)
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure>
this.splice(index, 1, newValue)
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">对于修改数组长度的</span><br><span class="line"></span><br></pre></td></tr></table></figure>
this.arr.splice(newLength)
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">### 声明响应式 property</span><br><span class="line"></span><br><span class="line">​		我们可以发现，前面的添加数据的方式，要不就是数组方法的添加，要不就是在对象里面进行添加，而并没有直接新添加一个对象的形式。由此可以知道：Vue是不运行动态添加根级响应式property的。对于根级响应式必须要提前进行申明。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">### 异步更新队列</span><br><span class="line"></span><br><span class="line">​		Vue在更新数据是异步进行更新的。对于数据的变化，Vue将开启一个队列。缓冲同一个事件循环的所有数据变更。如果watcher被多次触发，将只会被推入到队列中一次。这样可以不必要的操作和DOM的计算。然后在下一个事件循环中，在刷新队列执行的实际操作。 Promise.then() 、 MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 进行代替。</span><br><span class="line"></span><br><span class="line">​		当然这样虽然有了好处，节省了性能，但是同时，如果我们要进行dom操作时将会出现问题，因为异步的原因，dom获取的值是在上一次所剩下的。此时便有了一个方法，this.$nextTick(callback)，将方法写入this.$nextTick，然后这个方法将会在下次事件循环，dom操作之后进行获取。</span><br><span class="line"></span><br></pre></td></tr></table></figure>
methods: &#123;
updateMessage: function () &#123;
  this.message = &#39;已更新&#39;
  console.log(this.$el.textContent) // =&gt; &#39;未更新&#39;
  this.$nextTick(function () &#123;
      console.log(this.$el.textContent) // =&gt; &#39;已更新&#39;
  &#125;)
&#125;
&#125;
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">​	并且 this.$nextTick 返回的是一个 promise 对象，所以你可以使用新的 async/await 语法完成相同的事情</span><br><span class="line"></span><br></pre></td></tr></table></figure>
methods: &#123;
updateMessage: async function () &#123;
this.message = &#39;已更新&#39;
console.log(this.$el.textContent) // =&gt; &#39;未更新&#39;
await this.$nextTick()
console.log(this.$el.textContent) // =&gt; &#39;已更新&#39;
&#125;
&#125;
</code></pre>
</li>
</ul>
</li>
</ul>
</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/10/29/Vue/Vue2-%E6%95%99%E7%A8%8B/Vue2-%E6%95%99%E7%A8%8B-%E8%A7%84%E6%A8%A1%E5%8C%96/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/10/29/Vue/Vue2-%E6%95%99%E7%A8%8B/Vue2-%E6%95%99%E7%A8%8B-%E8%A7%84%E6%A8%A1%E5%8C%96/" class="post-title-link" itemprop="url">Vue-使用-规模化</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-10-29 23:15:47" itemprop="dateCreated datePublished" datetime="2021-10-29T23:15:47+08:00">2021-10-29</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/Vue2/" itemprop="url" rel="index"><span itemprop="name">Vue2</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="Vue2教程-规模化"><a href="#Vue2教程-规模化" class="headerlink" title="Vue2教程-规模化"></a>Vue2教程-规模化</h1><h2 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h2><h3 id="官方路由"><a href="#官方路由" class="headerlink" title="官方路由"></a>官方路由</h3><p>​        vue-router</p>
<p>​    对于大多数单页面应用，都推荐使用官方支持的 <a target="_blank" rel="noopener" href="https://github.com/vuejs/vue-router">vue-router 库</a>。更多细节可以移步 <a target="_blank" rel="noopener" href="https://router.vuejs.org/">vue-router 文档</a>。</p>
<h3 id="从零开始的简单路由"><a href="#从零开始的简单路由" class="headerlink" title="从零开始的简单路由"></a>从零开始的简单路由</h3><p>​        将vue实例存储，然后通过一个 routes 对象，对象存储了vue实例。然后通过 window.location.pathname 来进行获取url，通过判断 url 来决定显示什么页面，</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">const NotFound = &#123; template: &#x27;&lt;p&gt;Page not found&lt;/p&gt;&#x27; &#125;</span><br><span class="line">const Home = &#123; template: &#x27;&lt;p&gt;home page&lt;/p&gt;&#x27; &#125;</span><br><span class="line">const About = &#123; template: &#x27;&lt;p&gt;about page&lt;/p&gt;&#x27; &#125;</span><br><span class="line"></span><br><span class="line">const routes = &#123;</span><br><span class="line">  &#x27;/&#x27;: Home,</span><br><span class="line">  &#x27;/about&#x27;: About</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  el: &#x27;#app&#x27;,</span><br><span class="line">  data: &#123;</span><br><span class="line">    currentRoute: window.location.pathname</span><br><span class="line">  &#125;,</span><br><span class="line">  computed: &#123;</span><br><span class="line">    ViewComponent () &#123;</span><br><span class="line">      return routes[this.currentRoute] || NotFound</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  render (h) &#123; return h(this.ViewComponent) &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>​    唯一的好奇点就是。render函数也是一个会多次执行的，比如这里，return h(this.ViewComponent) 这里 viewcomponent 变化了，然后这个render也重新执行了一次。性质应该和computed 计算属性一样。是一个可以进行缓存的一个方法。</p>
<h2 id="状态管理"><a href="#状态管理" class="headerlink" title="状态管理"></a>状态管理</h2><h3 id="类Flux状态管理的官方实现"><a href="#类Flux状态管理的官方实现" class="headerlink" title="类Flux状态管理的官方实现"></a>类Flux状态管理的官方实现</h3><h4 id="React的开发者参考一下信息"><a href="#React的开发者参考一下信息" class="headerlink" title="React的开发者参考一下信息"></a>React的开发者参考一下信息</h4><h3 id="简单状态管理起步使用"><a href="#简单状态管理起步使用" class="headerlink" title="简单状态管理起步使用"></a>简单状态管理起步使用</h3><p>​        因为vue的data是单独的，不共享的，但是对于有些数据，我们需要进行共享，在a发生改变了之后，b也会发生改变，比如开始的 props 和 $emit()，但是，对于这个问题，我们发现这个的耦合过高，并且是针对于父子组件，如果组件的层级过高，需要再使用 <strong>依赖注入</strong> 进行跨组件使用。</p>
<p>​    下面这个例子就是进行的调用。他们共享了 sourceOfTruth，当A变更了 sourceOfTruth ，B也会自动的更新他们的视图。</p>
<p>​    但是，这样使用在调试的时候变为噩梦。因为你不知道变更出现在哪里。也不知道发生了什么变更。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">const sourceOfTruth = &#123;&#125;</span><br><span class="line"></span><br><span class="line">const vmA = new Vue(&#123;</span><br><span class="line">	data: &#123;</span><br><span class="line">		sourceOfTruth</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br><span class="line">const vmB = new Vue(&#123;</span><br><span class="line">	data: &#123;</span><br><span class="line">		sourceOfTruth</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>​        于是，对应的，我们便采用了一个简单的 store 模式。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">const store = &#123;</span><br><span class="line">	debug: true,</span><br><span class="line">	state: &#123;</span><br><span class="line">		message: &#x27;Hello!&#x27;</span><br><span class="line">	&#125;,</span><br><span class="line">	setMessageAction(newValue) &#123;</span><br><span class="line">		if (this.debug) log(&#x27;set message action triggered with&#x27;, newValue)</span><br><span class="line">		this.state.message = newValue</span><br><span class="line">	&#125;,</span><br><span class="line">	clearMessageAction() &#123;</span><br><span class="line">		if (this.debug) log(&#x27;clear message action triggrered&#x27;)</span><br><span class="line">		this.state.message = &#x27;&#x27;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const vmA = new Vue(&#123;</span><br><span class="line">	data: &#123;</span><br><span class="line">		privateState: &#123;&#125;,</span><br><span class="line">		sharedState: store.state</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>重要的是，注意你不应该在 action 中 替换原始的状态对象 - 组件和 store 需要引用同一个共享对象，变更才能够被观察到。</p>
</blockquote>
<p>​        于是我们便延申了约定，组件不能直接变更 state，而是要执行action 来 dispatch 事件通知 store改变state。最终便达成了 flux 架构。</p>
<h2 id="服务端渲染"><a href="#服务端渲染" class="headerlink" title="服务端渲染"></a>服务端渲染</h2><h3 id="SSR完全指南"><a href="#SSR完全指南" class="headerlink" title="SSR完全指南"></a>SSR完全指南</h3><p>​        在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入，适合已经熟悉 Vue、webpack 和 Node.js 开发的开发者阅读。请移步 <a target="_blank" rel="noopener" href="https://ssr.vuejs.org/zh/">ssr.vuejs.org</a>。</p>
<h3 id="Nuxt-js"><a href="#Nuxt-js" class="headerlink" title="Nuxt.js"></a>Nuxt.js</h3><p>​        从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 <a target="_blank" rel="noopener" href="https://nuxtjs.org/">Nuxt.js</a> 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。</p>
<h3 id="Quasar-Framework-SSR-PWA"><a href="#Quasar-Framework-SSR-PWA" class="headerlink" title="Quasar Framework SSR + PWA"></a>Quasar Framework SSR + PWA</h3><p>​        <a target="_blank" rel="noopener" href="https://quasar.dev/">Quasar Framework</a> 可以通过其一流的构建系统、合理的配置和开发者扩展性生成 (可选地和 PWA 互通的) SSR 应用，让你的想法的设计和构建变得轻而易举。你可以在服务端挑选执行超过上百款遵循“Material Design 2.0”的组件，并在浏览器端可用。你甚至可以管理网站的 <code>&lt;meta&gt;</code> 标签。Quasar 是一个基于 Node.js 和 webpack 的开发环境，它可以通过一套代码完成 SPA、PWA、SSR、Electron、Capacitor 和 Cordova 应用的快速开发。</p>
<h2 id="安全"><a href="#安全" class="headerlink" title="安全"></a>安全</h2>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/10/29/Vue/Vue2-%E6%95%99%E7%A8%8B/Vue2-%E6%95%99%E7%A8%8B-%E5%B7%A5%E5%85%B7/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/10/29/Vue/Vue2-%E6%95%99%E7%A8%8B/Vue2-%E6%95%99%E7%A8%8B-%E5%B7%A5%E5%85%B7/" class="post-title-link" itemprop="url">Vue-使用-工具</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-10-29 23:15:41" itemprop="dateCreated datePublished" datetime="2021-10-29T23:15:41+08:00">2021-10-29</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/Vue2/" itemprop="url" rel="index"><span itemprop="name">Vue2</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="Vue2教程-工具"><a href="#Vue2教程-工具" class="headerlink" title="Vue2教程-工具"></a>Vue2教程-工具</h1><h2 id="单文件组件"><a href="#单文件组件" class="headerlink" title="单文件组件"></a>单文件组件</h2><h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><p>​        在开始的Vue项目中，我们使用 Vue.component 来定义全局组件，然后使用 new Vue({el: ‘#xx’}) 在每个页面内指定一个容器元素。</p>
<ul>
<li><strong>全局定义</strong>：强制要求每个 component 中的命名不重复</li>
<li><strong>字符串模板</strong>：缺乏语法高亮，在HTML有多行的时候，需要用到 \</li>
<li><strong>不支持CSS</strong>：意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏</li>
<li><strong>没有构建步骤</strong>：限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug(formerly Jade) 和 Babel</li>
</ul>
<p>​    因此对应的 .vue 单文件组件便解决了上述的方法。并且还可以使用 webpack 和 Browserify 等构建工具。</p>
<h4 id="怎么看待关注点分离"><a href="#怎么看待关注点分离" class="headerlink" title="怎么看待关注点分离"></a>怎么看待关注点分离</h4><p>​        关注点分离不等于文件类型分离。现代的UI开发中，相比于将代码分成三大层次相互交织，我们将其划分为松散耦合的组件在将其组合起来更合理一些。</p>
<p>​        在一个组件中，模板，逻辑和样式都是内部耦合的。但是组件和组件之间时解耦的。</p>
<p>​    当然，我们也仍然可以将 JavaScript、css 分离成独立的文件然后做到热重载和预编译。</p>
<h3 id="起步"><a href="#起步" class="headerlink" title="起步"></a>起步</h3><h4 id="例子沙箱"><a href="#例子沙箱" class="headerlink" title="例子沙箱"></a>例子沙箱</h4><h4 id="针对刚接触JavaScript模块开发系统的用户"><a href="#针对刚接触JavaScript模块开发系统的用户" class="headerlink" title="针对刚接触JavaScript模块开发系统的用户"></a>针对刚接触JavaScript模块开发系统的用户</h4><h4 id="针对高级用户"><a href="#针对高级用户" class="headerlink" title="针对高级用户"></a>针对高级用户</h4><p>​        CLI 会为你搞定大多数工具的配置问题，同时也支持细粒度自定义<a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh/config/">配置项</a>。</p>
<p>​        有时你会想从零搭建你自己的构建工具，这时你需要通过 <a target="_blank" rel="noopener" href="https://vue-loader.vuejs.org/zh/">Vue Loader</a> 手动配置 webpack。关于学习更多 webpack 的内容，请查阅<a target="_blank" rel="noopener" href="https://webpack.js.org/configuration/">其官方文档</a>和 <a target="_blank" rel="noopener" href="https://webpack.academy/p/the-core-concepts">Webpack Academy</a>。</p>
<p>​    分别看看上面的 cli loader webpack 来进行详细的了解。</p>
<h2 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h2><h2 id="TypeScript-支持"><a href="#TypeScript-支持" class="headerlink" title="TypeScript 支持"></a>TypeScript 支持</h2><h2 id="生成环境部署"><a href="#生成环境部署" class="headerlink" title="生成环境部署"></a>生成环境部署</h2><h3 id="开启生产环境模式"><a href="#开启生产环境模式" class="headerlink" title="开启生产环境模式"></a>开启生产环境模式</h3><h3 id="模板预编译"><a href="#模板预编译" class="headerlink" title="模板预编译"></a>模板预编译</h3><h3 id="提取组件的CSS"><a href="#提取组件的CSS" class="headerlink" title="提取组件的CSS"></a>提取组件的CSS</h3><h3 id="跟踪运行时错误"><a href="#跟踪运行时错误" class="headerlink" title="跟踪运行时错误"></a>跟踪运行时错误</h3>
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/7/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/7/">7</a><span class="page-number current">8</span><a class="page-number" href="/page/9/">9</a><span class="space">&hellip;</span><a class="page-number" href="/page/11/">11</a><a class="extend next" rel="next" href="/page/9/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>

</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tallgy</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  





  





</body>
</html>
